﻿@media all and (orientation:portrait) {
    @-ms-viewport {
        width:320px;
        user-zoom: fixed;
        max-zoom: 1;
        min-zoom: 1;
    }
}

@media all and (orientation:landscape) {
    @-ms-viewport {
        width:480px;
        user-zoom: fixed;
        max-zoom: 1;
        min-zoom: 1;
    }
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #000;
}

body {
    letter-spacing: 0.02em;
    background-color: #000;
}

html {
    -ms-touch-action: pan-x;
    touch-action: pan-x;
}

body {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -ms-content-zooming: none;
}

#main-page {
    height: 101%;
    background-image: url('../images/bg-gradient-1.jpg');
    background-size:cover;
}

.app-title {
    font-size: 70px;
    font-weight:bold;
    color: #fff;
    margin:0px;
    font-family: 'Semilla';
    line-height:70px;
    padding-top:15px;
    text-shadow:2px 2px 2px #333;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.app-header {
    padding-top: 15px;
    padding-left: 20px;
}

.app-header .app-title:nth-child(2) {
    line-height:20px;
}

.app-functions {
    width: 100%;
    padding-top: 45px;
    text-align:center;
}

#capture-button {
    padding-top:40px;
}

#capture-button p {
    font-size: 60px;
    color: #fff;
    font-family: 'LeagueGothic';
    line-height:46px;
    margin: 0;
    margin-bottom:0px;
    text-shadow:1px 1px 1px #333;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#capture-button p:first-child {
    line-height:5px;
}
#capture-button p.M {
    font-family: 'Semilla';
    font-size:50px;
    line-height:50px;
}

#library-button p {
    font-size: 20px;
    color: #fff;
    font-family: 'Farray';
    line-height:40px;
    margin: 0;
    margin-bottom:0px;
    text-shadow:1px 1px 1px #333;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#library-button p.L {
    font-size: 55px;
    font-family: 'Semilla';
}

.or {
    font-family: 'Intro Inline';
    line-height: 10px;
    font-size: 20px;
    color: #fff;
    margin-bottom: 25px;
    text-shadow:1px 1px 1px #333;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#main-editor {
    background-color: #000;
    width: 100%;
    height: 100%;
    padding-top: 10px;
    background-image: url('../images/bg-sky.jpg');
    background-size:cover;
}

#main-editor #image-container {
    width: 100%;
    height: 70%;
    text-align: center;
    overflow: scroll;
    position:relative;
}

#image-holder {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    width: 100%;
    height: 100%;
    position:absolute;
    margin: 0 auto;
}

#image-holder.full-width {
    width: 200%;
    height: auto;
}
#image-holder.full-height {
    width: auto;
    height: 200%;
}

#main-editor #image-container img {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position:absolute;
}

#main-editor .app-editor-title {
    font-family: 'Narziss';
    font-size: 30px;
    margin-bottom: 20px;
    padding-left: 20px;
    color: #fff;
    text-shadow:2px 2px 2px #333;
    line-height:10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}